<template> 
  <div class="flex flex-col w-24 h-screen shadow-md justify-between">
    <div class="flex flex-col items-center mt-4">
      <div class="relative flex flex-col items-center">
        <div
          class="absolute w-full h-12 rounded-lg transition-transform duration-300"
          :style="sliderStyle"
        ></div>
        <div
          v-for="(item, index) in mainItems"
          :key="index"
          class="flex flex-col items-center justify-center w-48 h-24 p-6 cursor-pointer z-10"
          :class="{
            'text-teal-500': selectedItem === index,
            'text-gray-600': selectedItem !== index,
          }"
          @click.prevent="selectItem(index, item)"
        >
          <component :is="item.icon" class="text-xl mb-1" />
          <span class="text-sm">{{ item.name }}</span>
        </div>
      </div>
    </div>

    <div class="flex flex-col items-center mb-4">
      <div
        @click="triggerLoginModal"
        class="flex flex-col items-center justify-center w-48 h-24 p-6 cursor-pointer z-10 text-gray-600"
      >
        <component :is="UserOutlined" class="text-xl mb-1" />
        <span class="text-sm">{{ userStore.isLoggedIn ? '个人中心' : '未登录' }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  HomeOutlined,
  CalendarOutlined,
  TeamOutlined,
  SettingOutlined,
  UserOutlined,
  LoginOutlined,
  UngroupOutlined,
} from "@ant-design/icons-vue";
import { useUserStore } from "@/stores/user";

const { electronAPI } = window;

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

const mainItems = ref([
  { name: "首页", link: "/", icon: HomeOutlined },
  { name: "课堂点名", link: "/roll-call", icon: CalendarOutlined },
  { name: "班级管理", link: "/manageclass", icon: TeamOutlined },
]);

const selectedItem = ref(0);

const updateSelectedItem = (path) => {
  const index = mainItems.value.findIndex((item) => item.link === path);
  if (index !== -1) {
    selectedItem.value = index;
  }
};

const selectItem = (index, item) => {
  selectedItem.value = index;
  router.push({ path: item.link });
};

const openSettings = () => {
  electronAPI.openSettings();
};

const triggerLoginModal = () => {
  electronAPI.openSettingsAndShowLogin();
};

const sliderStyle = computed(() => {
  const itemHeight = 96; 
  return {
    height: `${itemHeight}px`,
    transform: `translateY(${selectedItem.value * itemHeight}px)`,
    transition: "transform 0.3s ease",
    borderRadius: "8px",
  };
});

onMounted(() => {
  updateSelectedItem(route.path);
});

watch(
  () => route.path,
  (newPath) => {
    updateSelectedItem(newPath);
  }
);
</script>
